<template>
  <div class="login">
    <router-view></router-view>
    <router-link to="/LoginView">面经登录</router-link>
    <hr />
    <div class="username">
      <p class="usn">用户名</p>
      <div class="choose">
        <input
          type="text"
          class="usi"
          placeholder="用户名"
          v-model="username"
          @blur="validateUsername"
          @input="clearname"
        />
        <p v-if="usernameEr" class="Er">{{ usernameEr }}</p>
      </div>
    </div>
    <hr />

    <div class="password">
      <p class="psd">密码</p>
      <div class="choose2">
        <input
          type="password"
          class="usi"
          placeholder="密码"
          v-model="password"
          @blur="validatePassword"
          @input="clearword"
        />
        <p v-if="passwordEr" class="Er">{{ passwordEr }}</p>
      </div>
    </div>
    <hr />
    <button class="loginbtn" @click="login">登录</button>
    <p class="register" @click="register">账号注册</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "LoginView",
  data() {
    return {
      username: "",
      usernameEr: "",
      password: "",
      passwordEr: "",
    };
  },
  methods: {
    register() {
      this.$router.push("/RegisterView");
    },
    validateUsername() {
      if (this.username === "") {
        this.usernameEr = "请输入用户名";
      } else if (this.username.length < 5) {
        this.usernameEr = "用户名至少包含五个字符";
      }
    },
    clearname() {
      this.usernameEr = "";
    },
    validatePassword() {
      if (this.password === "") {
        this.passwordEr = "请输入用户名";
      } else if (this.password.length < 6) {
        this.passwordEr = "用户名至少包含六个字符";
      }
    },
    clearword() {
      this.passwordEr = "";
    },
   async login() {
   const res=  await axios({
    url:'http://interview-api-t.itheima.net/h5/user/login',
    method:'POST',
    data:{
      username:this.username,
      password:this.password
    }
      })
      console.log(res.data);
      if(res.data.code===10000){
        alert('登录成功')
        localStorage.setItem('token',res.data.data.token)
        localStorage.setItem('username',this.username)
        localStorage.setItem('password',this.password)
        this.username = ''
        this.password = ''
        this.$router.push('/HmLayout/HmArticle')
      }else{
        alert('登录失败')
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.login {
  padding: 10px;
  position: relative;
}
.active {
  //设置成块元素
  display: block;
  font-size: 20px;
  width: 100%;
  line-height: 100%;
  text-decoration: none;
  color: #333;
  text-align: center;
  margin: 30px 0;
}

.username {
  width: 100%;
  display: flex;
  margin: 10px 0;
  .usn {
    width: 100px;
    font-size: 20px;
    text-align: start;
    color: #333;
    .chooose {
      display: flex;
    }
  }
}
.password {
  width: 100%;
  display: flex;
  margin: 10px 0;
  font-size: 20px;
  .psi {
    font-size: 20px;
    flex: 1;
    border: none;
    padding: 5px;
    outline: none;
    align-items: center;
    &:focus {
      border: none;
    }
  }
  .psd {
    font-size: 20px;
    width: 100px;
    text-align: start;
    color: #333;
  }
}
.loginbtn {
  width: 100%;
  height: 50px;
  background-color: #fa6d1d;
  color: white;
  margin: 15px 0;
  border: none;
  border-radius: 5px;
}
.register {
  position: absolute;
  right: 10px;
  color: #007cc4;
  font-size: 12px;
}
.usi {
  font-size: 20px;

  flex: 1;
  border: none;
  padding: 5px;
  outline: none;
  align-items: center;

  &:focus {
    border: none;
  }
}
.Er {
  color: red;
  font-size: 12px;
}
</style>
